<script>
import { defineComponent } from "vue";

import * as echarts from "echarts";

export default defineComponent({
    data() { },
    methods: {
        init() {
            // 绘制图表
            this.myChart.setOption({
                title: {
                    text: '商品数量展示---柱状',
                    subtext: 'Living Expenses in Shenzhen'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        var tar = params[1];
                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    splitLine: { show: false },
                    data: ['家电', '礼物', '厨具', '汽车用品', '服装', '清洁用具']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Placeholder',
                        type: 'bar',
                        stack: 'Total',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: [0, 1700, 1400, 1200, 300, 0]
                    },
                    {
                        name: 'Life Cost',
                        type: 'bar',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        data: [2900, 1200, 300, 200, 900, 300]
                    }
                ]
            });
        },
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("main"));
        // 绘制图表
        this.init();
    },
});
</script>

<template>
    <div>
        <!-- <h1>柱状图表</h1> -->

        <div id="main"></div>
    </div>
</template>

<style lang="scss" scoped>
#main {
    height: 800px;
}
</style>
